AWS Amplify で認証中のユーザー情報を取得・表示してみた

#AWS Amplify

#AWS

いわさ

2024.09.11

いわさです。

先日カスタム属性を含めて AWS Amplify Gen2 での認証周りを実装しました。

今回はユーザー情報をアプリケーション側で表示したり、あるいは何か判断して制御するために、サインイン中のユーザー情報を取得してみたいと思います。
取得方法はいくつかあって、今回はそれぞれを React + Next.js のクイックスタートアプリで組み込んで試してみました。

getCurrentUser を使う

まずひとつめはgetCurrentUserを使って取得する方法です。
GetCurrentUserOutputオブジェクトを取得出来まして、ユーザーID・ユーザー名・認証フロー・ログインID くらいまでであればこれで取得可能です。

<ドキュメント>

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { getCurrentUser, GetCurrentUserOutput } from 'aws-amplify/auth';
import { useEffect, useState } from "react";

function App() {
  const [user, setUser] = useState<GetCurrentUserOutput>();
  const getCurrentUserAsync = async () => {
    const result = await getCurrentUser();
    setUser(result);
  };

  useEffect(() => {
    getCurrentUserAsync();
  }, []);

  const formFields = {
    signUp: {
      "custom:tenant_id": {
        label: 'Hoge Tenant',
        order: 1
      }
    }
  };

  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => (
        <main>
          <div>
            <p>userId: {user?.userId}</p>
            <p>username: {user?.username}</p>
            <p>authFlowType: {user?.signInDetails?.authFlowType}</p>
            <p>loginId: {user?.signInDetails?.loginId}</p>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

実行してみるとこんな感じで取得されます。

fetchUserAttributes を使う

続いてはfetchUserAttributesを使う方法です。
ユーザー属性を取得してくれます。

:
import { FetchUserAttributesOutput, fetchUserAttributes } from 'aws-amplify/auth';
import { useEffect, useState } from "react";

function App() {
  const [attr, setAttrResult] = useState<FetchUserAttributesOutput>();
  const getCurrentUserAsync = async () => {
    const result = await fetchUserAttributes();
    console.log(result);
    setAttrResult(result);
  };

  useEffect(() => {
    getCurrentUserAsync();
  }, []);

:

  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => (
        <main>
          <div>
          <p>email: {attr?.email}</p>
          <p>all: {JSON.stringify(attr)}</p>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

こんな感じでして、先程よりも多くのユーザー属性が取得出来ています。
先ほどはカスタム属性は取得されていなかったのですが、こちらではカスタム属性まで取得出来ています。

一方で認証フローなどは取得出来ていませんでしたが、おおよそ同じかそれ以上の情報が取得できるので基本的にはこちらを使うのが良さそうだと感じました。

fetchAuthSession を使う

最後にfetchAuthSessionを使う方法です。
こちらは ID トークンやアクセストークンを直接取得します。

JWT の解析が必要にはなるのですが、先程の２つの方法以上にトークン情報が必要な場合（クライアント ID が必要とか）についてはこちらの方法が利用可能です。

:

import { AuthSession, fetchAuthSession } from 'aws-amplify/auth';
import { useEffect, useState } from "react";

function App() {
  const [session, setSessionResult] = useState<AuthSession>();
  const getCurrentUserAsync = async () => {
    const result = await fetchAuthSession();
    setSessionResult(result);
  };

  useEffect(() => {
    getCurrentUserAsync();
  }, []);

:

  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => (
        <main>
          <div>
          <p>idtoken: {session?.tokens?.idToken?.toString()}</p>
          <p>accesstoken: {session?.tokens?.accessToken.toString()}</p>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;